// 引入Vue
import Vue from 'vue'
// 引入vuex插件
import Vuex from 'vuex'

import axios from 'axios'
// 由于它一个vuex插件，所以，还要以插件的方式挂载在vue上。
// 1. 插件的方式挂载在vue
Vue.use(Vuex)

// 2.创建Vuex.Store实例
// Vuex是一个对象，其中有一个属性名是Store,属性值是一个函数
// 这在这里充当一个构造器
const store = new Vuex.Store({
    // 各种配置项
    // state 就相当于vue组件中的data。它用来存放整个vue项目中公共的数据
    //       这个数据，在所有的vue组件中都可以访问到
    state: {
        books:[],
        num: 101,
        count: 21.5,
        person: {
            name: '张三'
        }
    },
    mutations: {
        // 下面定义了一个mutation。本质就是一个函数
        // 特殊之处：在定义函数时，第一个参数就表示当前vuex中的state
        //          直接在此函数内部去修改state.
        //          在调用这个函数时，第一个参数不要传入。
        // 1.不带参数的mutation
        mAdd1(state){
            // 这个mutation的作用就是让state中的num加1
            state.num++
        },
        // 2. 带参数的mutation
        mAddN(state, obj){
            // 这个mutation的作用就是让state中的num加 n
            // 这个n是需要额外传入的
            state.num = state.num + obj.a + obj.b
        },
        mSetBook(state, books) {
            state.books = books
        }
    },
    // computed
    getters: {
        num10: function (state) {
            return state.num * 10 + '元'
        }
    },
    actions: {
        // context可以理解为整个 vuex的实例
        getData: function (context) {
            // context.commit() // 提交mutation
            // context.state// 获取数据
            axios({
                method:'get',
                url: 'http://www.liulongbin.top:3006/api/getbooks '
            }).then((res)=>{
                console.log(res)
                // 本次ajax取回的数据
                // 保存到 state 中
                res.data.data
                context.commit('mSetBook', res.data.data)

            })
            
        }
    }
})
// 3.导出
export default store